<!-- 数据展示 -->
<template>
  <div>
    <div class="section8 flex-col">
      <div class="mod3 flex-col">
        <div class="layer1 flex-row justify-between">
          <img
            class="pic1"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8ab9873a34a9f5c7ba83f4fa6bdaeac819d7f2176c774d8e4cabac56f12fdb5f"
          />
          <div class="mod4 flex-col"></div>
        </div>
      </div>
    </div>

    <div class="section9 flex-col">
      <div class="group8 flex-col">
        <div class="mod5 flex-col">

          <div class="up-query-in">
            <el-form ref="form" inline :model="form" class="form-options dashboard" label-width="100px">
              <el-form-item label="仓库">
                <el-autocomplete
                  ref="warehouseDisRef"
                  v-model="form.warehouseDis"
                  value-key="name"
                  :fetch-suggestions="querySearchWarehouse"
                  :trigger-on-focus="true"
                  clearable
                  @select="handleSelectWarehouse"
                  @change="handleChangeWarehouse"
                  @clear="clickClearWarehouseDisRef"
                  />
              </el-form-item>
              <el-button round type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
            </el-form>
          </div>

          <!-- 数据展示部分 -->
          <div class="mod8 flex-row justify-between">
            <!--<div class="box3 flex-col">-->
            <!--  <div class="box4 flex-col">-->
            <!--    <span class="word19">消防器材总数</span>-->
            <!--    <span class="word20">{{ div0.stockNum }}</span>-->
            <!--    <div class="bd18 flex-row justify-between">-->
            <!--      <span class="word22">模块数量（个）:</span>-->
            <!--      <span class="txt6">{{ div0.tlevel1Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="bd19 flex-row justify-between">-->
            <!--      <span class="word22">分类数量（类）:</span>-->
            <!--      <span class="info8">{{ div0.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="bd20 flex-row justify-between">-->
            <!--      <span class="word23">器材种类（种）:</span>-->
            <!--      <span class="txt7">{{ div0.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box5 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div1.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div1.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div1.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div1.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box6 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div2.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div2.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div2.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div2.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box7 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div3.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div3.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div3.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div3.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box8 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div4.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div4.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div4.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div4.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box9 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div5.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div5.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div5.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div5.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
            <!--<div class="box10 flex-col">-->
            <!--  <div class="group9 flex-col">-->
            <!--    <span class="txt9">{{ div6.level1Name }}器材数</span>-->
            <!--    <span class="word32">{{ div6.stockNum }}</span>-->
            <!--    <div class="wrap4 flex-row justify-between">-->
            <!--      <span class="word33">分类数量（类）:</span>-->
            <!--      <span class="txt10">{{ div6.tlevel2Num }}</span>-->
            <!--    </div>-->
            <!--    <div class="wrap5 flex-row justify-between">-->
            <!--      <span class="info12">器材种类（种）:</span>-->
            <!--      <span class="info13">{{ div6.tlevel3Num }}</span>-->
            <!--    </div>-->
            <!--  </div>-->
            <!--</div>-->
          </div>

          <!-- 图表部分 -->
          <div class="mod10 flex-row justify-between">
            <div class="block3 flex-col">
              <div class="layer3 flex-col">
                <span class="word37">器材月度出库频率</span>
              </div>
              <!-- 出库频率统计 -->
              <div id="equipmentOutRateDiv" class="down-in-left"></div>
            </div>
            <div class="block4 flex-col">
              <div class="group19 flex-row">
                <span class="txt20">设备报废数量排名</span>
              </div>
              <!-- 报废排行（实际是报废和失效的数据，以便分析哪些器材消耗比较大，显示的是Top10的） -->
              <div id="equipmentScrapRateDiv" class="down-in-right"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section12 flex-col"></div>
  </div>
</template>

<script>
import {
  getWarehouse,//仓库列表，查询条件使用
  getDBType,//分类信息数据
  getOutFrequency,//获取出库频率统计数据
  getScrapSort//获取报废排除数据
} from '@/api/warehouse'

export default {
  name: 'dashboard',
  data() {
    return {
      //查询条件
      form: {
        warehouseId: '',
        warehouseDis: ''
      },
      warehouseOptions: [],//查询条件仓库
      typeDetails: null,
      div0: [],
      div1: [],
      div2: [],
      div3: [],
      div4: [],
      div5: [],
      div6: [],
      outFrequency: null,
      scrapSort: null
    }
  },
  created() {
    //查询条件，仓库
    getWarehouse({}).then(res => {
      this.warehouseOptions = res.resultData
    })
  },
  mounted() {
    this.getData()
  },
  methods: {
    onQuery() {
      this.getData()
    },
    getData() {
      const param = {}
      Object.assign(param, this.form)

      getDBType(param).then(res => {
        this.typeDetails = res.resultData
        this.div0 = this.typeDetails.div0
        this.div1 = this.typeDetails.div1
        this.div2 = this.typeDetails.div2
        this.div3 = this.typeDetails.div3
        this.div4 = this.typeDetails.div4
        this.div5 = this.typeDetails.div5
        this.div6 = this.typeDetails.div6
        //console.log(1234567899999999999999999999999999999);
        //console.log(JSON.stringify(this.typeDetails));
        //console.log(JSON.stringify(this.typeDetails.div0.stockNum));
      }),

      getOutFrequency(param).then(res => {
        this.outFrequency = res.resultData
        //console.log('获取出库频率数据')
        //console.log(JSON.stringify(this.outFrequency))

        //特别注意这个方法要放进then中执行，与 getOutFrequency 同级放后边没办法确保getOutFrequency先执行，尝试了多种方法不行，比如promise
        this.equipmentOutRate()
      }),

      getScrapSort(param).then(res => {
        this.scrapSort = res.resultData
        // console.log("获取报废排行");
        // console.log(JSON.stringify(this.scrapSort));

        //这个方法要放then中，确保数据已经Set
        this.equipmentScrapRate()
      })
    },
    /* 仓库 */
    querySearchWarehouse: function(queryString, cb) {
      const results = this.warehouseOptions
      var rs = queryString ? results.filter(this.createFilter(queryString)) : results
      cb(rs)
    },
    handleSelectWarehouse(item) {
      this.form.warehouseId = item.id
      //console.log('handleChangeWarehouse'+this.form.warehouseId+'=====');
    },
    // 清空使用
    handleChangeWarehouse(item) {
      if(this.form.warehouseDis==''){
        this.form.warehouseId = '';
      }
      //console.log('handleChangeWarehouse'+this.form.warehouseId+'=====');
    },

    clickClearWarehouseDisRef() {
      this.$nextTick(() => {
        if (this.$refs.warehouseDisRef) {
          this.$refs.warehouseDisRef.activated = true;
        }
      });
    },
    createFilter(queryString) {
      return (rr) => {
        return (rr.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1)
      }
    },

    /* 器材出库频率信息 */
    equipmentOutRate: function() {
      var outChart = this.$echarts.init(document.getElementById('equipmentOutRateDiv'), 'dark')
      // 指定图表的配置项和数据
      var app = {}
      var option
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function(map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideTop',
        distance: 0,//柱子上的字离柱子的距离，负值远（放进柱子里边字体就正常了）
        onChange: function() {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          })
        }
      }

      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}',//{c}：数据值
        fontSize: 12,//柱子上文字的字体
        fontStyle: 'normal',
        rich: {
          name: {}
        }
      }

      //设置值Arr
      var len = this.outFrequency.typeNameList.length
      var seriesArr = [len]
      for (let index = 0; index < len; index++) {
        var key = this.outFrequency.typeNameList[index]

        //console.log("=============模块："+JSON.stringify(key));
        //console.log("=============模块值Arr："+ JSON.stringify(this.outFrequency[key]));
        seriesArr[index] =
          {
            name: key,
            type: 'bar',
            //barMinHeight: "5px",
            //barMaxWidth:"5px",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.outFrequency[key] //特别注意，当key是个变量时用[变量]的方式
          }
      }

      option = {
        // title: {
        //   text: '器材月度出库频率'
        // },
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: ['#006699', '#fac858', '#ee6666', '#91cc75', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],//部分颜色会导致文字显示为空心字体，不清楚哪些颜色
        legend: [
          {
            textStyle: {
              color: 'lightgray',
              fontSize: 14
            },
            left: 'right',
            padding: [
              10,  // 上
              50, // 右
              0,  // 下
              0 // 左
            ],
            //data: this.outFrequency.typeNameList
            data: ['灭火模块', '通讯模块', '后勤模块', '救援模块', '个人防护', '其他'] //TODO 李怀北 注释后用正式数据
            //orient: "vertical",
            //top: "55px"
          }
        ],
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              //color:'white'
              fontSize: 14
            },
            type: 'category',
            axisTick: { show: false },
            data: this.outFrequency.monthList //['2021.02', '2021.03', '2021.04', '2021.05', '2021.06', '2021.07', '2021.08','2021.09', '2021.10', '2021.11', '2021.12', '2022.01']
          }
        ],
        yAxis: [
          {
            axisLabel: {
              //color:'white'
              fontSize: 14
            },
            type: 'value'
          }
        ],
        series: //seriesArr  //TODO 李怀北 实际数据解注释即可
          [
            {
              name: '灭火模块',
              type: 'bar',
              //barMinHeight: "5px",
              //barMaxWidth:"5px",
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [320, 332, 301, 334, 390, 320, 332, 301, 334, 390, 334, 390]
            },
            {
              name: '通讯模块',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 220, 182, 191, 234, 290, 234, 290]
            },
            {
              name: '后勤模块',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 150, 232, 150, 232, 201, 154, 190]
            },
            {
              name: '救援模块',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [98, 77, 101, 99, 40, 98, 77, 101, 99, 40, 99, 40]
            },
            {
              name: '个人防护',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 150, 232, 150, 232, 201, 154, 190]
            },
            {
              name: '其他',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: [98, 77, 101, 99, 40, 98, 77, 101, 99, 40, 99, 40]
            }
          ]
      }

      // 使用刚指定的配置项和数据显示图表。
      option && outChart.setOption(option)

    },

    equipmentScrapRate: function() {
      var scrapChart = this.$echarts.init(document.getElementById('equipmentScrapRateDiv'), 'dark')
      // 指定图表的配置项和数据
      var option = {
        // title: {
        //   text: '设备报废数量排名'
        // },
        backgroundColor: 'transparent',
        color: ['#0099FF', '#fac858', '#ee6666', '#91cc75', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          show: false
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            //color:'white'
            rotate: 90,
            fontSize: 13
          },
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          axisLabel: {
            //color:'red',
            fontSize: 13
            //,fontFamily:'sans-serif'//似乎不起作用，字体有点奇怪
            //,fontStyle:'italic'
          },
          type: 'category',
          //data: this.scrapSort.typeNameList //TODO 李怀北 实际数据解注释即可
          data: ['PQ8泡沫枪', 'PQ16泡沫枪', '高倍数泡沫发生器', '干粉枪', '消防移动储水装置', '移动消防炮', '过滤式综合防毒面具', 'A型干粉枪', 'C型干粉枪', '干粉枪']
        },
        series: [
          {
            name: '报废数量',
            type: 'bar',
            barMinHeight: '50px',
            barWidth: '15px',
            barMaxWidth: '30px',
            //data:  this.scrapSort.scrapNumList //TODO 李怀北 实际数据解注释即可
            data: [1023, 2136, 2653, 3854, 3962, 4265, 4463, 4698, 5236, 5569]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      option && scrapChart.setOption(option)
    }
  }
}
</script>


<style>
.dashboard {
}

/* 顶部查询框样式 */
.dashboard .el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: white;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* 外层整个页面DIV */
.section9 {
  z-index: 10;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.59);
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
/* 中间DIV */
.group8 {
  height: 100%;
  background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea8becc238fc789d29dc312757b857280261d4ae586bb0d5e95746cc8808cf79);
  /* 背景图片大小 */
  background-size:100% 100%;
  background-position:0% 0% ;
  background-repeat:no-repeat;
  /* 内容的位置，输入框是最上边的 */
  width: 100%;
  padding: 1.4% 0 0 32px;
}
/* 内容的最里层DIV */
.mod5 {
  width: 98%;
  height: 100%;
}
/* 深色背景（配色） */
.section12 {
  z-index: 5;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
}


/* 背景图片 */
/* 深色背景 */
.section8 {
  z-index: 6;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng497fe0ed5022d73c0a88af49a180d6ca549015dabccced3a7942d2189bac4ec5);
  /* 背景图片大小 */
  background-size:100% 100%;
  background-position:0% 0% ;
  background-repeat:no-repeat;
}
/* 电路图背景 */
.pic1 {
  width: 100%;
  height: 100%;
}
.mod4 {
  width: 564px;
  height: 739px;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd8ccddaff1744e71d49c7de21467674df1069184a2da6568bd262ac35409fa67) -1px -1px no-repeat;
  margin-top: 1px;
}
/* 键盘背景 */
.mod3 {
  z-index: 7;
  height: 100%;
  background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngceb2a37e8ff3aeec05087b28dca36ccdcf302aac338c90dd70855d559fd7d6e4);
  /* 背景图片大小 */
  background-size:100% 100%;
  background-position:0% 0% ;
  background-repeat:no-repeat;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.layer1 {
  width: 100%;
  height: 100%;
}



/* 查询条件 DIV */
.up-query-in {
  width: 100%;
  /* 里边内容的位置 */
  text-align: right;
  padding-right: 1%;

  transform: translateY(-7px);
  /* background:rgb(223, 13, 13); */
  height: 32px;
  -ms-transform: translateY(-7px); /* IE 9 */
  -moz-transform: translateY(-7px); /* Firefox */
  -webkit-transform: translateY(-7px); /* Safari 和 Chrome */
  -o-transform: translateY(-7px); /* Opera */
}

/* 数据展示部分 */
.mod8 {
  width: 100%;
  height: 27%;
  margin-top: 9px;
}
/* 数据展示第一个DIV */
.box3 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 15px 0 0 12px;
}
.box4 {
  width: 152px;
  height: 216px;
}
/* 数据展示字体等样式 */

.word19 {
  width: 120px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  white-space: nowrap;
  line-height: 28px;
  margin-left: 3px;
}

.word20 {
  width: 144px;
  height: 70px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 145, 255, 1);
  font-size: 60px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 70px;
  margin: 24px 0 0 3px;
}

.bd18 {
  width: 126px;
  height: 28px;
  margin-top: 10px;
}



.txt6 {
  width: 12px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 100, 0, 1);
  font-size: 24px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
}

.bd19 {
  width: 138px;
  height: 28px;
  margin-left: 3px;
}

.word22 {
  width: 102px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  margin-top: 7px;
}

.info8 {
  width: 24px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 100, 0, 1);
  font-size: 24px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
}

.bd20 {
  width: 149px;
  height: 28px;
  margin-left: 3px;
}

.word23 {
  width: 102px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  margin-top: 7px;
}

.txt7 {
  width: 35px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 100, 0, 1);
  font-size: 24px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
}

.box5 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 15px 0 0 15px;
}

.group9 {
  width: 140px;
  height: 175px;
}

.box6 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 15px 0 0 15px;
}

.box7 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 15px 0 0 15px;
}

.box8 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 14px 0 0 15px;
}

.txt9 {
  width: 140px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20px;
  white-space: nowrap;
  line-height: 28px;
}

.word32 {
  width: 87px;
  height: 70px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 145, 255, 1);
  font-size: 60px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 70px;
  margin-top: 24px;
}

.wrap4 {
  width: 149px;
  height: 28px;
  margin-top: 25px;
}

.word33 {
  width: 102px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  margin-top: 7px;
}

.txt10 {
  width: 35px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 100, 0, 1);
  font-size: 24px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
}

.wrap5 {
  width: 126px;
  height: 28px;
}

.info12 {
  width: 102px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
  margin-top: 7px;
}

.info13 {
  width: 12px;
  height: 28px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(250, 100, 0, 1);
  font-size: 24px;
  font-family: DINAlternate-Bold;
  white-space: nowrap;
  line-height: 28px;
  text-align: left;
}

.box9 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 214px;
  padding: 14px 0 0 15px;
}

.box10 {
  height: 240px;
  border: 1px solid rgba(21, 101, 164, 1);
  background-color: rgba(16, 34, 66, 0.5);
  box-shadow: inset 0px 1px 12px 1px rgba(4, 151, 253, 0.5);
  width: 228px;
  padding: 14px 0 0 15px;
}

.layer3 {
  width: 1117px;
  height: 542px;
}

.word37 {
  width: 127px;
  height: 22px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 238, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTiH;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
}




/* 下外部效果边框 */
/* 外部DIV */
.mod10 {
  width: 100%;
  height: 64%;
  /* 决定上下两部分的缝隙大小 */
  margin-top: 40px;
}

/* 下左 */
.block3 {
  z-index: 241;
  height: 95%;
  width: 75%;
  position: relative;
  padding: 0.3% 0 0 2%;
  /* 背景图片 */
  background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeda6ed59188eadeb339c96aeb9ff90658d50900fa008c739be28b3ba7c75caa6);
  /* 背景图片大小 */
  background-size:100% 100%;
  background-position:0% 0% ;
  background-repeat:no-repeat;
}

/* 下右 */
.block4 {
  z-index: 241;
  height: 95%;
  width: 24%;
  position: relative;
  padding: 0.3% 0 0 2%;
  background-image: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng53c87558a502f0e22d5cee7a32d7f8ba7f54ba2edc5f1101b87f5fb91234023d);
  /* 背景图片大小 */
  background-size:100% 100%;
  background-position:0% 0% ;
  background-repeat:no-repeat;
}

/* 只影响图表，外部的效果边框不受控制-Begin */
.down-in-left {
  height: 80%;
  margin-left: 1%;
  margin-top: 6%;
  position: absolute;
  width: 94%;
  /* background: #ffffff1a; */
  border-radius: 2px;
  /* border: 1px solid #3d4044; */
}
.down-in-right {
  height: 80%;
  margin-top: 15%;
  position: absolute;
  width: 84%;
  border-radius: 2px;
}
/* end */


/* 设备报废数量排名 Begin */
.group19 {
  width: 127px;
  height: 22px;
  margin: 0px 0 0 0px;
}
.txt20 {
  width: 127px;
  height: 22px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(0, 238, 255, 1);
  font-size: 16px;
  font-family: AlibabaPuHuiTiH;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
}
/* 设备报废数量排名 End */



/* 其他通用样式 */
.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}
</style>
